<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="../html/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../html/js/jquery.js"></script>
</head>
<style>
    table {
        text-align: center;
        line-height: 50px;
    }

    .disabled {
        color: gray; /* 更改文字颜色为灰色 */
        pointer-events: none; /* 阻止鼠标事件 */
        cursor: not-allowed; /* 更改鼠标光标样式 */
    }

    .img {
        width: 50px;
        height: 50px;
    }
</style>
<body>
<div class="container">
    <h1>用户管理</h1>
    <button class="btn btn-success" onclick="toAdd()">添加用户</button>
    <p></p>
    <p style="height: 50px;">
        <input style="width: 100px" type="text" placeholder="ID" id="user_id">
        <input style="width: 100px" type="text" placeholder="用户名" id="user_name">
        <input style="width: 100px" type="text" placeholder="邮箱" id="user_email">
        <input style="width: 100px" type="text" placeholder="性别（0/1）" id="user_gender">
        <input style="width: 100px" type="text" placeholder="状态（0/1）" id="user_status">
        <input style="width: 100px" type="button" value="搜索" onclick="toH(1)">
    </p>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>头像</th>
            <th>用户名</th>
            <th>邮件</th>
            <th>密码</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tableShow">

        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul id="pageTo" class="pagination justify-content-center pagination-sm">
        </ul>
    </nav>
    <p class="text-center mt-4">
        第<span id="page">1</span>页，共<span id="allPage">0</span>页，总记录数<span id="allNumber">0</span>条
    </p>
</div>
</body>
</html>

<script>
    // 当页面打开执行的代码
    $(document).ready(function () {
        // 展示数据
        showTable(null, null, null, null, null, 1)
    })

    // 禁用用户数据
    function deleteUsers(id, status) {
        status = status === 1 ? 0 : 1
        $.ajax({
            'url': 'http://localhost:8080/users/' + id + '/' + status,
            'type': 'put',
            'data': null,
            'dataType': 'json',
            'success': deleteUsersSuccess
        })
    }

    function deleteUsersSuccess(data) {
        if (data.code == '200') {
            alert("禁用成功！")
            showTable(null, null, null, null, null, 1)
        } else {
            alert("禁用失败!")
        }
    }

    // toAdd
    function toAdd() {
        window.location.href = "add.html"
    }

    // 展示数据
    function showTable(id, name, gender, status, email, pageNum) {
        $.ajax({
            'url': 'http://localhost:8080/users',
            'type': 'get',
            'data': {id, name, gender, status, email, pageNum},
            'dataType': 'json',
            'success': showTableSuccess
        })
    }

    function showTableSuccess(data) {
        $('#tableShow tr').remove()
        data.data.list.forEach(dd => {
            let status = dd.status === 1 ? '启用' : '禁用'
            let gender = dd.gender === 1 ? '男' : '女'
            let tes = dd.status === 1 ? '禁用' : '启用'
            let color = dd.status === 1 ? 'red' : 'green'
            let imagePath = dd.imagePath === null ? 'static/upload/th.jpg' : dd.imagePath
            $('#tableShow').append(`<tr>
            <td>` + dd.id + `</td>
            <td><img class="img" src="http://localhost:8080/` + imagePath + `"/></td>
            <td>` + dd.name + `</td>
            <td>` + dd.email + `</td>
            <td>` + dd.password + `</td>
            <td>` + gender + `</td>
            <td>` + formatDate(dd.birthday) + `</td>
            <td>` + status + `</td>
            <td><button class="btn  btn-sm btn-primary" onclick="toUpdate(` + dd.id + `)">修改</button>
            <button style="background-color: ` + color + `;border: 0px" class="btn btn-danger btn-sm" onclick="deleteUsers(` + dd.id + `,` + dd.status + `)">` + tes + `</button></td>
        </tr>`)
        })
        // 设置总页数
        $('#allPage').html(data.data.pages)
        // 设置总数量
        $('#allNumber').html(data.data.total)
        $('#pageTo li').remove()
        // 查看是否是首页尾页
        let isFirstPage = data.data.isFirstPage
        let isLastPage = data.data.isLastPage
        if (isFirstPage) {
            $('#pageTo').append(`<li class="page-item "><a class="page-link disabled" href="#">首页</a></li>
        <li class="page-item"><a class="page-link disabled" href="#">上一页</a></li>`)
        } else {
            $('#pageTo').append(`<li class="page-item "><a class="page-link" href="#"  onclick="homePage()">首页</a></li>
        <li class="page-item"><a class="page-link" href="#"  onclick="upPage()">上一页</a></li>`)
        }
        // 设置页码展示
        let page = parseInt($('#page').html())
        let start = Math.max(1, page - 1); // 起始页码，至少为1，且从当前页码的前一页开始
        let end = Math.min(start + 2)

        data.data.navigatepageNums.forEach(dd => {
            if (dd >= start && dd <= end) {
                if (dd == page) {
                    $('#pageTo').append(`<li class="page-item "><a class="page-link disabled" onclick="toH(`+dd+`)"  href="#" >` + dd + `</a></li>`)
                } else {
                    $('#pageTo').append(`<li class="page-item "><a class="page-link" onclick="toH(`+dd+`)"  href="#" >` + dd + `</a></li>`)
                }
            }
        })
        if (isLastPage) {
            $('#pageTo').append(`<li class="page-item"><a class="page-link disabled" href="#" >下一页</a></li>
        <li class="page-item"><a class="page-link disabled" href="#">页尾</a></li>`)

        } else {
            $('#pageTo').append(`<li class="page-item"><a class="page-link" href="#" onclick="nextPage()">下一页</a></li>
        <li class="page-item"><a class="page-link" href="#" onclick="endPage()">页尾</a></li>`)

        }
    }

    // toH
    function toH(page) {
        showTable($('#user_id').val(), $('#user_name').val(), $('#user_gender').val(), $('#user_status').val(), $('#user_email').val(), page)
        $('#page').html(page)
    }

    // toUpdate
    function toUpdate(id) {
        window.location.href = "update.html?id=" + id
    }

    // 首页
    function homePage() {
        toH(1) // 展示第一页
        $('#page').html(1)
    }

    // 上一页
    function upPage() {
        if ($('#page').html() > 1) {
            toH(($('#page').html()) - 1)
            $('#page').html(($('#page').html() - 1))
        } else {
            alert("已经是第一页！！！")
        }
    }

    // 下一页
    function nextPage() {
        let page = $('#page').html()
        let allPage = $('#allPage').html()
        if (page < allPage) {
            toH( ++page)
            $('#page').html(page)
        } else {
            alert("已经是最后一页！！！")
        }
    }

    // 尾页
    function endPage() {
        toH( $('#allPage').html())
        $('#page').html($('#allPage').html())
    }

    function formatDate(timestamp) {
        // 创建一个新的Date对象，传入时间戳作为参数
        var date = new Date(timestamp);

        // 获取年、月和日
        var year = date.getFullYear();
        var month = date.getMonth() + 1; // getMonth()返回的月份是从0开始的，所以需要加1
        var day = date.getDate();

        // 如果月份或日期是一位数，则在前面添加一个'0'
        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }

        // 拼接成yyyy-MM-dd格式的字符串
        var formattedDate = year + '-' + month + '-' + day;

        return formattedDate;
    }
</script>